<template>
    <div ref="containerElRef" class="container">
        <el-icon
            class="btn-close"
            :color="'rgba(2, 163, 255, 1)'"
            :size="fitChartSize(28)"
            @click="dashboard.toggleCongestionAlarm"
            ><CircleCloseFilled
        /></el-icon>
        <h3>
            <el-switch
                v-model="noticeEnable"
                style="--el-switch-on-color: #13ce66"
            />
            <span class="label">提醒</span>
        </h3>
        <ul class="list">
            <li v-for="item in list" :key="item.id">
                <div class="head">
                    <div class="title">
                        <img v-if="item.title === '突发拥堵'" :src="iconTu" />
                        <img
                            v-else-if="item.title === '常发拥堵'"
                            :src="iconChang"
                        />
                        <span>{{ item.title }}</span>
                    </div>
                    <span class="date">{{ item.time }}</span>
                </div>
                <p>{{ item.alarm }}</p>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, ref, shallowRef, watch } from "vue";
import dayjs from "dayjs";
import { storeToRefs } from "pinia";
import anime from "animejs/lib/anime.es.js";
import iconTu from "@/assets/icon_tu.png";
import iconChang from "@/assets/icon_chang.png";
import { DATE_TIME_FORMAT } from "@/const";
import { giveAlarmList } from "@/services/dashborad";
import { fitChartSize } from "@/utils/responsible";
import { useDashboardStore } from "@/store/dashboard";

const INTERVAL_POLL = 2 * 60 * 1000;

const audio = new Audio("/audio/dingdong.mp3");

const noticeEnable = ref(false);
const dashboard = useDashboardStore();
const { congestionAlarmVisible } = storeToRefs(dashboard);

const containerElRef = ref(null);

const list = shallowRef<any>([]);

async function fetchList() {
    const data = (await giveAlarmList()) as any;
    list.value =
        data?.map((e: any) => ({
            ...e,
            time: dayjs(new Date(e.time)).format(DATE_TIME_FORMAT),
        })) || [];
    if (list.value?.length > 0) {
        audio.play();
    }
}

dashboard.$onAction(async ({ name }) => {
    if (name !== "toggleCongestionAlarm" || !containerElRef.value) return;

    if (congestionAlarmVisible.value) {
        // 即将关闭
        anime({
            targets: containerElRef.value,
            opacity: [1, 0],
            duration: 200,
            translateX: [0, fitChartSize(450)],
            easing: "easeInOutQuad",
        });
    } else {
        // 即将打开
        fetchList();
        anime({
            targets: containerElRef.value,
            opacity: [0, 1],
            duration: 200,
            translateX: [fitChartSize(450), 0],
            easing: "easeInOutQuad",
        });
    }
});

// onMounted(fetchList)

let timer: null | number = null;

watch(noticeEnable, (val) => {
    if (val) {
        timer = setInterval(() => {
            fetchList();
        }, INTERVAL_POLL) as unknown as number;
    } else if (timer) {
        clearInterval(timer);
    }
});

onBeforeUnmount(() => {
    if (timer) {
        clearInterval(timer);
    }
});
</script>

<style lang="scss" scoped>
.container {
    transform: translateX(450px);
    opacity: 0;

    z-index: $drawerIndex;
    position: fixed;
    top: $headerHeight;
    right: 34px;
    display: flex;
    flex-direction: column;
    width: 410px;
    height: 425px;
    padding: 10px 0 0;
    background-color: rgba($color: #032136, $alpha: 0.9);
    color: #fff;
    .btn-close {
        position: absolute;
        top: -14px;
        right: -14px;
        cursor: pointer;
    }
    > h3 {
        flex-shrink: 0;
        height: 38px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: end;
        margin-bottom: 0;
        background-image: url(@/assets/bg_title_congestion_alarm.png);
        background-size: cover;
        .label {
            margin-left: 4px;
            font-weight: 400;
            font-size: 14px;
            color: #ffffff;
            line-height: 20px;
        }
    }
    ul.list {
        padding: 14px 20px;
        overflow: auto;
        li {
            list-style: none;
            padding: 16px;
            border-radius: 6px;
            background: #093858;
            box-shadow: inset 0px 0px 12px 0px #267aae;
            font-size: 16px;
            color: #e6e6e6;
            line-height: 22px;
            transition: all 0.2s ease-in-out;
            &:hover {
                background: #09474f;
                box-shadow: inset 0px 0px 12px 0px #2691ae;
            }
            .head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 10px;
                font-weight: 600;
                font-size: 18px;
                color: #d2e7ea;
                line-height: 25px;

                .title {
                    display: flex;
                    align-items: center;
                    img {
                        width: 20px;
                        height: 22px;
                        margin-right: 8px;
                    }
                }
                .date {
                    font-weight: 400;
                    font-size: 14px;
                    color: #e6e6e6;
                    line-height: 20px;
                }
            }
        }
        li + li {
            margin-top: 14px;
        }
    }
}
</style>
